<template>
  <el-dialog title="客户列表" v-model="dialogVisible" width="1200px" :before-close="handleClose" class="customer-list-dialog" @close="handleClose" append-to-body>
    
    <div class="filter-section">
      <!-- <el-input
      v-model="queryParams.supplierName"
      style="max-width: 240px"
      placeholder="请输入客户名称"
      class="input-with-select"
      clearable

    >
      <template #append>
        <el-button  @click="handleQuery" type="primary"><el-icon><Search /></el-icon></el-button>
      </template>
    </el-input> -->
    <el-form :model="queryParams" ref="queryForm" :inline="true" label-width="68px" @submit.native.prevent>
      <el-form-item label="客户名称" prop="supplierName">
          <el-input ref="supplierInput" @change="searchChange" v-model="searchInput" placeholder="请输入客户名称/联系人手机" clearable @keyup.enter="handleQuery" />
        </el-form-item>
        <el-form-item label="联系人" prop="contacts">
          <el-input v-model="queryParams.contacts" placeholder="请输入联系人" clearable @keyup.enter="handleQuery" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleQuery">搜索</el-button>
          <el-button @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div :gutter="20" class="content mt20">
      <div v-show="tableHeight && showTree" :span="edgeSize" :offset="0" :style="`height: ${tableHeight}px;position: relative;background-color:#fff`">
        <div class="left" :style="`height: ${tableHeight}px;`">
          <div class="left-top">
            <div class="">客户分类</div>
            <div class="">
              <img style="width: 30px; height: 30px" @click="handleEdge" :src="showTree ? imgs[1] : imgs[0]" />
            </div>
          </div>
          <el-tree
            ref="classifyTreeRef"
            class="mt-2"
            node-key="id"
            :data="classifyList"
            :current-node-key="currentItem"
            :props="{ label: 'label', children: 'children' }"
            :expand-on-click-node="false"
            :filter-node-method="filterNode"
            highlight-current
            default-expand-all
            @node-click="itemClick"
          />
          <!-- <div class="buttons">
            <div class="button" @click="handleAddClassify">
              <el-icon>
                <CirclePlus />
              </el-icon>
              <div>新增分类</div>
            </div>
            <div class="button" @click="handleEditClassify">
              <el-icon>
                <Edit />
              </el-icon>
              <div>编辑分类</div>
            </div>
            <div class="button" @click="handleDelClassify">
              <el-icon>
                <Delete />
              </el-icon>
              <div>删除分类</div>
            </div>
          </div> -->
        </div>
      </div>
      <el-card ref="table" shadow="always" :class="{ 'w-tree': showTree, 'w-all': !showTree }">
        <el-table
          :height="'calc(100vh - 422px)'"
          v-loading="loading"
          :data="dataSource"
          @selection-change="handleSelectionChange"
          @row-dblclick="dbclick"
          @row-click="rowClick"
          ref="tableRef"
        >
          <el-table-column type="selection" width="55" align="center" :selectable="selectHandle" />
          <!-- <el-table-column label="客户编号" align="left" prop="supplierCode" width="150" /> -->
          <el-table-column label="客户名称" align="left" prop="supplierName" width="250" />
          <el-table-column label="分类" align="left" prop="supplierClassifyName" width="150" />
          <el-table-column label="协助人" align="left" prop="assistUserName" width="150" />
          <el-table-column label="客户经理" align="left" prop="operationManagerName" width="150" />
          <el-table-column label="销售区域" align="left" prop="saleAreaName" width="200" />

          <el-table-column label="级别价" align="left" prop="classStatus">
            <template #default="scope">
              {{ selectDictLabel(price_level, scope.row.priceType) }}
            </template>
          </el-table-column>
          <el-table-column label="联系人" align="left" prop="contactName"></el-table-column>
          <el-table-column label="创建时间" align="left" prop="createTime" width="200" />
        </el-table>
        <pagination :total="total" v-model:page.sync="queryParams.pageNum" v-model:limit.sync="queryParams.pageSize" @pagination="getList" />
      </el-card>
    </div>

    <div class="fixed-icon" @click="handleEdge" v-show="!showTree">
      <el-icon>
        <DArrowRight />
      </el-icon>
    </div>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="handleClose">取消</el-button>
        <el-button type="primary" @click="handleConfirm">确定</el-button>
      </div>
    </template>
  </el-dialog>
</template>
  
  <script>
  import listMixin from '@/mixins/listMixin';
import zk from '@/assets/images/zhankai.svg';
import zd from '@/assets/images/zhedie.svg';
export default {
  name: 'CustomerListModal',
  mixins: [listMixin],

  data() {
    return {
      urls: {
        list: '/order/supplier/list',
        delete: '/order/supplier'
      },
      dialogVisible: false,
      customerName: '',
      manager: '',
      currentPage: 1,
      total: 1,
      customerOptions: [],
      managerOptions: [],
      tableHeight: 0,
      imgs: [zk, zd],
      price_level:[],
      showTree: true,
      searchInput:null,
    };
  },
  methods: {
    searchChange(v){
      // 如果是手机号
      const reg = /^1[3-9][0-9]\d{8}$/;
      if(reg.test(v)){
        this.queryParams.contactPhone = v
        this.queryParams.supplierName = ''
      }else{
        this.queryParams.supplierName = v
        this.queryParams.contactPhone = ''
      }
    
    },
    handleRowClick(row) {
        this.$refs.table.toggleRowSelection(row);
    },
    handleClose() {
      this.dialogVisible = false;
      this.$emit('close');
    },
    open() {
      this.dialogVisible = true;
      this.$nextTick(() => {
        setTimeout(() => {
          this.tableHeight = this.$refs.table.$el.scrollHeight;
        }, 200);
      });
      this.getDicts('price_level')
      
    this.getClassifyTree('1');
    this.$nextTick(()=>{
      setTimeout(()=>{
        this.$refs.supplierInput.focus()
      },200)
    })
    },
    handleConfirm() {
        if (this.selectedRows.length === 0) return this.$modal.msgError('请选择客户')
      if(this.selectedRows.length > 1) return this.$modal.msgError('只能选择一个客户')
      this.$emit('ok', this.selectedRows)
      this.handleClose();
    },
    handleCreate() {
      // Handle create new customer logic
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      this.currentPage = val;
    },
    handleEdge() {
      this.showTree = !this.showTree;
      this.$nextTick(() => {
        setTimeout(() => {
          this.tableHeight = this.$refs.table.$el.scrollHeight;
        }, 200);
      });
    },
        dbclick(row) {
          this.$emit('ok', [row])
          this.handleClose();
        },
    itemClick(data) {
      this.currentItem = data;
      console.log(this.currentItem, '666');
      this.queryParams.supplierClassifyId = data.id;
      this.getList();
    },
    rowClick(row) {
      this.$refs.tableRef.clearSelection()
      this.$refs.tableRef.toggleRowSelection(row);

      this.selectedRows = [row];
    }

  }
};
</script>
  
  <style lang="scss" scoped>
.customer-list-dialog {
  /* Add any custom styles here */
}

.filter-section {
  margin-bottom: 20px;

}

.text-right {
  text-align: right;
}

.pagination-container {
  margin-top: 20px;
  text-align: right;
}

.el-select {
  width: 100%;
}

/* Override element-plus styles if needed */
:deep(.el-dialog__body) {
  padding: 20px;
}
.left {
  width: 240px;
  // height: calc(100vh - 234px);
  border: 1px solid #e6ebf5;
  // position: relative;
  border-radius: 4px;
  overflow-x: hidden;
  overflow-y: auto;
  padding-bottom: 60px;

  .fodder_list {
    z-index: 20;

    .fodder_item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 10px 20px;
      cursor: pointer;

      .box {
        display: flex;
        justify-content: flex-start;
        align-items: center;

        svg {
          margin-right: 10px;
        }

        .fodder_name {
          font-size: 14px;
          color: #303133;
          width: 84px;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
      }
    }

    .fodder_item.active,
    .fodder_item:hover {
      background-color: #f5f5f5;
    }
  }

  .buttons {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    position: absolute;
    bottom: 1px;
    width: 238px;
    border-top: 1px solid #e6ebf5;
    background-color: #fff;
    z-index: 21;
    font-size: 12px;
    color: #303133;

    .button {
      cursor: pointer;
      padding: 10px;
      text-align: center;

      i {
        margin-right: 5px;
      }
    }

    .button:not(:last-child) {
      border-right: 1px solid #e6ebf5;
    }

    .button:hover {
      color: #409eff;
    }
  }
}

.main {
  height: calc(100vh - 240px);
  overflow-x: scroll;

  .title {
    font-size: 12px;
    color: #606266;
    width: 100px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
}

.left-top {
  display: flex;
  justify-content: space-between;
  padding: 6px 20px;
  border-bottom: 1px solid #e6ebf5;
  align-items: center;

  .box {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    font-size: 24px;
    color: #303133;
    font-weight: bold;
  }
}

.fixed-icon {
  position: fixed;
  //left: 0;
  top: 400px;
  z-index: 999;
  background-color: #409eff;
  padding: 12px 2px;
  color: #fff;
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
  display: flex;
  cursor: pointer;
}

.content {
  display: flex;
  justify-content: space-between;
  position: relative;
}

.w-tree {
  width: calc(100% - 260px);
}

.w-all {
  width: 100%;
}
</style>